<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <meta name="keywords" content="">
    <meta name="description" content="">

    <link rel="shortcut icon" href="favicon.ico">
    <link href="${ctx!}/assets/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="${ctx!}/assets/css/font-awesome.css?v=4.4.0" rel="stylesheet">

    <link href="${ctx!}/assets/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">

    <link href="${ctx!}/assets/css/animate.css" rel="stylesheet">
    <link href="${ctx!}/assets/css/style.css?v=4.1.0" rel="stylesheet">
    <link href="${ctx!}/assets/css/admin-main.css" rel="stylesheet">
    <link href="${ctx!}/assets/css/alarm.css" rel="stylesheet">
    <link href="${ctx!}/assets/css/cubic.css" rel="stylesheet">
    <link href="${ctx!}/assets/css/foot.css" rel="stylesheet">
    <link href="${ctx!}/assets/css/sidebar-menu1.css" rel="stylesheet">
    <link href="${ctx!}/assets/css/efficiency.css" rel="stylesheet">

    <style>
        .layui-layer-title {
            background-color: #1a2f42 !important;
            color: white !important;
        }
    </style>

</head>

<body style="background-color:transparent;">
<div class="top-div">

    <div class="cubic">
        <ul>
            <li class="current"><a href="${ctx!}/web/analysis/efficiency">&nbsp;实时分析&nbsp;</a></li>
            <li><a href="${ctx!}/web/analysis/efficiency-history">&nbsp;历史分析&nbsp;</a></li>
        </ul>
    </div>
</div>

<div class="foot-div analysis" style="height: 100%;">
    <div id="left_top" class="data_box" style="height: 43%">
        <div class="data_box_bar">
            <span class="data_box_icon"></span>
            <span class="data_box_title">机组能效</span>
            <button style="margin-right: 22px" onclick="jizunengxiaoClick(event,2);">月能效
            </button>
            <button onclick="jizunengxiaoClick(event,1);">天能效</button>
            <button class="active" onclick="jizunengxiaoClick(event,0);">时能效</button>
        </div>
        <div style="height: 80%;width: 100%;">
            <div id="left_top_chart" style="height: 100%;width:100%;"></div>
        </div>
    </div>

    <div id="right_top" class="data_box" style="height: 43%">
        <div class="data_box_bar">
            <span class="data_box_icon"></span>
            <span class="data_box_title">系统能效</span>
            <button style="margin-right: 22px" onclick="xitongnengxiaoClick(event,2);">月能效
            </button>
            <button onclick="xitongnengxiaoClick(event,1);">天能效</button>
            <button class="active" onclick="xitongnengxiaoClick(event,0);">时能效</button>
        </div>
        <div style="height: 80%;width: 100%;">
            <div id="right_top_chart" style="height: 100%;width:100%;"></div>
        </div>
    </div>

    <div id="left_bottom" class="data_box" style="height: 43%">
        <div class="data_box_bar">
            <span class="data_box_icon"></span>
            <span class="data_box_title">设备耗电量占比</span>
        </div>
        <div style="height: 80%;width: 100%;">
            <div id="left_bottom_chart" style="height: 100%;width:100%;"></div>
        </div>
    </div>

    <div id="right_bottom" class="data_box" style="height: 43%">
        <div class="data_box_bar">
            <span class="data_box_icon"></span>
            <span class="data_box_title">系统能耗指标</span>
            <button style="margin-right: 22px" onclick="iplvClick(event,1);">采暖系统</button>
            <button class="active" onclick="iplvClick(event,0);">
                制冷系统
            </button>

        </div>
        <div style="height: 80%;width: 100%;">
            <div id="right_bottom_chart" style="height: 100%;width:100%;"></div>
        </div>
    </div>
</div>

</div>


<!-- 全局js -->
<script src="${ctx!}/assets/js/jquery.min.js?v=2.1.4"></script>
<script src="${ctx!}/assets/js/bootstrap.min.js?v=3.3.6"></script>

<!-- Bootstrap table -->
<script src="${ctx!}/assets/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
<script src="${ctx!}/assets/js/plugins/bootstrap-table/bootstrap-table-mobile.min.js"></script>
<script src="${ctx!}/assets/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>

<!-- Peity -->
<script src="${ctx!}/assets/js/plugins/peity/jquery.peity.min.js"></script>

<script src="${ctx!}/assets/js/plugins/validate/jquery.validate.min.js"></script>
<script src="${ctx!}/assets/js/plugins/validate/messages_zh.min.js"></script>
<script src="${ctx!}/assets/js/plugins/layer/layer.min.js"></script>
<script src="${ctx!}/assets/js/plugins/layer/laydate/laydate.js"></script>

<script src="${ctx!}/assets/js/echarts.min.js"></script>
<!-- 自定义js -->
<script src="${ctx!}/assets/js/content.js?v=1.0.0"></script>

<!-- Page-Level Scripts -->
<script>
    $(function () {
        setSize();
        jizunengxiaoClick(null, 0);
        xitongnengxiaoClick(null, 0);
        shebeihaodianliangzhanbi();
        iplvClick(null, 0)
    })


    //绘制机组能效
    function jizunengxiaoClick(e, timeMode) {
        if (e != null) {
            var $this = $(e.target)
            if ($this.hasClass("active")) {
                return
            }
            $this.siblings().removeClass("active");
            $this.addClass("active");
        }
        $.ajax({
            type: "GET",
            url: "${ctx!}/realtime/analysis/cop?timeMode=" + timeMode,
            success: function (data) {
                var data = eval("(" + data + ")")
                if (true) {
                    data = data.data
                    var dates = data.dates
                    dates = ['2021-07-12', '2021-07-13', '2021-07-14', '2021-07-15', '2021-07-16', '2021-07-17', '2021-07-18',]
                    for (var i = 0; i < dates.length; i++) {
                        if (timeMode == 0) {
                            dates[i] = dates[i].substring(10, 16);
                        } else if (timeMode == 1) {
                            dates[i] = dates[i].substring(8, 10) + "日";
                        } else if (timeMode == 2) {
                            dates[i] = dates[i].substring(5, 7) + "月";
                        }
                    }
                    var ydatas = [data.heatingcop, data.coolingcop]
                    ydatas = [[2.5, 2.6, 2.7, 0.5, 0.6, 0.9, 2.5, 2.6, 2.7], [2.4, 2.5, 2.8, 2.6, 2.4, 1.5, 1.6, 1.5, 1.4]]
                    var legends = ["供暖机组", "制冷机组"]
                    jizunengxiao_draw(dates, ydatas, legends);
                } else {
                    layer.msg("机组能效曲线显示失败," + data.message)
                }
            }
        });

    }

    function jizunengxiao_draw(xdata, ydatas, legends) {
        var myChart = echarts.init(document.getElementById("left_top_chart"));
        //指定图表的配置项和数据
        myChart.clear();

        // 指定图表的配置项和数据
        function getSeries() {
            var series = [];
            for (var i = 0; i < ydatas.length; i++) {
                var e = {
                    smooth: true,
                    name: legends[i],
                    type: 'line',
                    data: ydatas[i]
                };
                series.push(e);
            }
            return series;
        }

        var option = {
            color: ["#A85443", "#6C8AC6"],
            textStyle: {
                color: '#fff'
            },
            title: {
                textStyle: {
                    color: '#fff'
                }
            },
            grid: {
                left: '10%',
                right: "10%",
                top: "20%",
                bottom: "10%"

            },
            tooltip: {
                trigger: 'axis',
                // formatter: function (params) {
                //     console.log(params)
                //     var show = x_data[params[0].dataIndex] + '\n'
                //     for (var param in params) {
                //         show += param.marker + param.seriesName + parseFloat(param.data).toFixed(3) + '(t)'
                //     }
                //     return show
                // },
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                }
            },
            legend: {
                textStyle: {
                    color: '#fff'
                },
                name: legends,
                top: '5%',
                right: '5%'
            },
            xAxis: {
                name: "time",
                data: xdata,
                axisLine: {
                    lineStyle: {
                        color: '#C8CBD0',
                        width: 2,//这里是为了突出显示加上的
                    }
                },
                boundaryGap: false,
                axisLabel: { //X轴标签
                    show: true,
                    textStyle: {
                        color: "#90CEF9",//字体颜色
                        fontSize: 12 //字体大小
                    }
                }
            },
            yAxis: {
                name: "COP",
                scale: true,
                axisLabel: { //X轴标签
                    show: true,
                    textStyle: {
                        color: "#90CEF9",//字体颜色
                        fontSize: 12 //字体大小
                    }
                },
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: false
                },
                splitLine: { //X轴分隔符
                    show: true,
                    lineStyle: {
                        color: "#273C55",
                        type: 'dashed'
                    }

                },
                min: 0,
                max: 5,
                interval: 2.5,
                itemStyle: {
                    //柱形图圆角，鼠标移上去效果，如果只是一个数字则说明四个参数全部设置为那么多
                    emphasis: {
                        barBorderRadius: 30
                    },

                    normal: {
                        //柱形图圆角，初始化效果
                        barBorderRadius: [10, 10, 10, 10],
                        label: {
                            show: true,//是否展示
                            position: 'top',
                            textStyle: {
                                fontWeight: 'bolder',
                                fontSize: '12',
                                fontFamily: '微软雅黑'
                            }
                        }
                    }
                }
            },
            series: getSeries()
        };
        //使用刚指定的配置项和数据显示图表
        myChart.setOption(option);
    }

    //绘制系统能效
    function xitongnengxiaoClick(e, timeMode) {
        if (e != null) {
            var $this = $(e.target)
            if ($this.hasClass("active")) {
                return
            }
            $this.siblings().removeClass("active");
            $this.addClass("active");
        }
        $.ajax({
            type: "GET",
            url: "${ctx!}/realtime/analysis/scop?timeMode=" + timeMode,
            success: function (data) {
                // layer.close(upload);
                var data = eval("(" + data + ")")
                if (true) {
                    data = data.data
                    var dates = data.dates
                    dates = ['2021-07-12', '2021-07-13', '2021-07-14', '2021-07-15', '2021-07-16', '2021-07-17', '2021-07-18',]
                    for (var i = 0; i < dates.length; i++) {
                        if (timeMode == 0) {
                            dates[i] = dates[i].substring(10, 16);
                        } else if (timeMode == 1) {
                            dates[i] = dates[i].substring(8, 10) + "日";
                        } else if (timeMode == 2) {
                            dates[i] = dates[i].substring(5, 7) + "月";
                        }
                    }
                    var ydatas = [data.heatingscop, data.coolingscop]
                    ydatas = [[2.5, 2.6, 2.9, 1.5, 0.6, 1.9, 2.5, 2.6, 2.7], [1.4, 2.5, 2.8, 0.6, 1.4, 1.5, 1.6, 1.5, 1.4]]
                    var legends = ["供暖", "制冷"]
                    xitongnengxiao_draw(dates, ydatas, legends);
                } else {
                    layer.msg("系统能效曲线显示失败," + data.message)
                }
            }
        });

    }

    function xitongnengxiao_draw(xdata, ydatas, legends) {
        var myChart = echarts.init(document.getElementById("right_top_chart"));
        //指定图表的配置项和数据
        myChart.clear();

        // 指定图表的配置项和数据
        function getSeries() {
            var series = [];
            for (var i = 0; i < ydatas.length; i++) {
                var e = {
                    smooth: true,
                    name: legends[i],
                    type: 'line',
                    data: ydatas[i]
                };
                series.push(e);
            }
            return series;
        }

        // 指定图表的配置项和数据
        var option = {
            color: ["#A85443", "#6C8AC6"],
            textStyle: {
                color: '#fff'
            },
            title: {
                textStyle: {
                    color: '#fff'
                }
            },
            grid: {
                left: '10%',
                right: "10%",
                top: "20%",
                bottom: "10%"

            },
            tooltip: {
                trigger: 'axis',
                // formatter: function (params) {
                //     console.log(params)
                //     var show = x_data[params[0].dataIndex] + '\n'
                //     for (var param in params) {
                //         show += param.marker + param.seriesName + parseFloat(param.data).toFixed(3) + '(t)'
                //     }
                //     return show
                // },
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                }
            },
            legend: {
                textStyle: {
                    color: '#fff'
                },
                data: legends,
                top: '5%',
                right: '5%'
            },
            xAxis: {
                name: "time",
                data: xdata,
                axisLine: {
                    lineStyle: {
                        color: '#C8CBD0',
                        width: 2//这里是为了突出显示加上的
                    }
                },
                boundaryGap: false,
                axisLabel: { //X轴标签
                    show: true,
                    textStyle: {
                        color: "#90CEF9",//字体颜色
                        fontSize: 12 //字体大小
                    }
                }
            },
            yAxis: {
                name: "COPs",
                scale: true,
                axisLabel: { //X轴标签
                    show: true,
                    textStyle: {
                        color: "#90CEF9",//字体颜色
                        fontSize: 12 //字体大小
                    }
                },
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: false
                },
                splitLine: { //X轴分隔符
                    show: true,
                    lineStyle: {
                        color: "#273C55",
                        type: 'dashed'
                    }

                },
                min: 0,
                max: 5,
                interval: 2.5,
                itemStyle: {
                    //柱形图圆角，鼠标移上去效果，如果只是一个数字则说明四个参数全部设置为那么多
                    emphasis: {
                        barBorderRadius: 30
                    },

                    normal: {
                        //柱形图圆角，初始化效果
                        barBorderRadius: [10, 10, 10, 10],
                        label: {
                            show: true,//是否展示
                            position: 'top',
                            textStyle: {
                                fontWeight: 'bolder',
                                fontSize: '12',
                                fontFamily: '微软雅黑'
                            }
                        }
                    }
                }
            },
            series: getSeries()
        };
        //使用刚指定的配置项和数据显示图表
        myChart.setOption(option);
    }

    //切换成制冷系统 能源日均使用情况
    function shebeihaodianliangzhanbi() {
        var chart = echarts.init(document.getElementById('left_bottom_chart'))
        $.ajax({
            type: "GET",
            url: "${ctx!}/realtime/analysis/equipment_power",
            success: function (data) {
                var data = eval('(' + data + ')')
                if (data.success) {
                    data = data.data
                    var equipmets = data.equipments
                    var powercosts = data.powercosts
                    var data = []
                    var total = 0
                    for (var i = 0; i < equipmets.length; i++) {
                        total += parseFloat(powercosts[i]);
                    }
                    for (var i = 0; i < equipmets.length; i++) {
                        data.push({
                            value: parseFloat(powercosts[i]).toFixed(1),
                            name: equipmets[i] + "耗电量" + (parseFloat(powercosts[i]) / total * 100).toFixed(2) + "%"
                        })
                    }
                    var option = {
                        color: ["#FF5C5C", "#4BC2DF", "#4671C6", "#7CCE7A", "#FFC655", "#E733A2", "#C0CC2D"],
                        tooltip: {
                            trigger: 'item'
                        },
                        series: [
                            {
                                type: 'pie',
                                radius: '55%',
                                data: data,
                                label: {
                                    // color: 'rgba(126,181,220, 1)',
                                    fontWeight: 'bolder'
                                }
                            }
                        ]

                    }
                    chart.setOption(option)
                } else {
                    layer.msg(data.message)
                }

            },
            error: function () {
                alert("加载失败")
            }
        })
    }

    //绘制IPLV曲线
    function iplvClick(e, mode) {
        if (e != null) {
            var $this = $(e.target)
            if ($this.hasClass("active")) {
                return
            }
            $this.siblings().removeClass("active");
            $this.addClass("active");
        }
        var xdata = ["11:00", "12:00", "13:00", "14:00", "15:00"]
        var ydata = [15, 14, 16, 18, 13]
        iplv_draw(xdata, ydata, mode);
        // draw_right_bottom_chart(false)
    }

    function iplv_draw(xdata, ydata, mode) {
        var color = ['#6a7985', '#657CA8', '#65ABE7', '#5d98eb', 'rgba(101,171,231,0.3)', 'rgba(126,171,233,0)', 'rgba(44,118,222, 0.8)']
        if (mode == 1) {
            color = ['#ec534c', '#ec534c', '#ec534c', '#ec534c', 'rgba(236,83,76,0.3)', 'rgba(236,83,76,0)', 'rgba(236,83,76,0.8)']
        }
        var chart = echarts.init(document.getElementById('right_bottom_chart'))
        var option = {
            tooltip: {
                trigger: 'axis',
                // formatter: function (params) {
                //     var str = (mode == 0 ? '制冷能效：' : '采暖能效：')
                //     return x_data_panel[params[0].dataIndex] + "  " + params[0].marker + str + y_data[params[0].dataIndex]
                // },
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: color[0]
                    }
                }
            },
            grid: {
                left: '10%',
                right: "10%",
                top: "20%",
                bottom: "10%"

            },
            xAxis: {
                name: "time",
                data: xdata,
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: color[1],
                    }
                },
                axisTick: {
                    show: false
                },
                boundaryGap: false,
                axisLabel: { //X轴标签
                    show: true,
                    textStyle: {
                        color: color[1],//字体颜色
                        fontSize: 12 //字体大小
                    }
                },
                splitLine: { //X轴分隔符
                    show: true,
                    lineStyle: {
                        color: color[4]
                    }
                }
            },
            yAxis: [
                {
                    position: 'left',
                    type: 'value',
                    nameTextStyle: {
                        color: color[2],
                        fontSize: 12,
                    },
                    min: 0,
                    max: 100,
                    interval: 20,
                    lineStyle: {
                        color: color[2],
                    },
                    axisLabel: {
                        textStyle: {
                            color: color[2],//字体颜色
                            fontSize: 12 //字体大小
                        }

                    },
                    axisTick: {show: false},
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: color[1],
                        }
                    },
                    splitLine: { //Y轴分隔符
                        show: true,
                        lineStyle: {
                            color: color[4]
                        }

                    }
                }
            ],
            series: [
                {
                    smooth: true,
                    areaStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: color[3]
                            },
                                {
                                    offset: 1,
                                    color: color[5]
                                }
                            ], false),
                            shadowColor: color[6],
                            shadowBlur: 20
                        }
                    },
                    type: 'line',
                    data: ydata,
                    itemStyle: {
                        normal: {
                            color: color[2],
                            label: {
                                show: false, //开启显示
                                position: 'bottom', //在下方显示
                                textStyle: { //数值样式
                                    color: color[2],
                                    fontSize: 16
                                }
                            }
                        }
                    }
                }
            ]
        }
        chart.setOption(option)
    }


    function setSize() {
        var barheight = $("#navbar", window.parent.document).height();//获取当前页面总高度
        var top = barheight + $(".top-div").height() + 20;//顶部页面的高度（注意height计算的高度没有把顶部嵌套的页面高度加进去）
        $(".foot-div").css("top", top);//给底部页面添加绝对路径距离上面高度
        $(".foot-div").height(document.documentElement.clientHeight - top);
    }


</script>


</body>

</html>
